<template>
	<view class="page">
		<view class="order">
			<view class="top_info">
				<!-- 适配状态栏 -->
				<view class="status_bar"></view>
				<view class="flex top_title flex_col_center">
					<view>
					<!-- #ifndef MP-WEIXIN-->
						<text class="custom-icon custom-icon-jiantou2" @click="leftClick"></text>
						<text class="name">退货单</text>
					<!-- #endif -->
					</view>
					<view class="flex-middle" @click="show = true" >
						<image src="@/static/image/order_user.png" class="icon_user" mode=""></image>
						<text class="account">{{userInfo.userName}}</text>
						<image class="icon_right" src="@/static/image/order_right.png" mode=""></image>
					</view>
				</view>
				<view class="padding">
					<my-search from="returnorder" :notTop="true" :zid="userInfo.userId"></my-search>
				</view>

				<u-tabs :list="stateList" :current="tabIndex" @change="change" bg-color="none" inactive-color="black" active-color="#40AE36" class="tabs"></u-tabs>
				<!-- item-width="20%" -->
			</view>
			<view class="all_order">
				<div class="scroll_height">
					<view class="sign_order" v-for="(item) in dataList" @click="toDetail(item.id)" :key="item.id">
						<my-returnorderlist :item="item" @clickbtn="btnAction"></my-returnorderlist>
					</view>
				</div>
				<view class="nodata" v-if="dataList.length==0">
					<image :src="nodataImg" mode="aspectFit"></image>
					<view>暂时还没有此类订单~</view>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="userList" @confirm="selectUser" value-name="id" label-name="nickname">
			<text class="custom-icon custom-icon-yonghu"></text>
		</u-select>

	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				nodataImg: getApp().globalData.nodataImg,
				show: false,
				tabIndex: 0,
				//0: 待审核1:待入库2: 待退款3: 已完成4: 已取消
				stateList: [{
						name: "全部",
					},
					{
						name: "待审核",
					},
					{
						name: "待退款",
					},
					{
						name: "已完成",
					},
					{
						name: "已取消",
					},
				],
				userList: [], //用户列表
				userInfo: {
					userId: '', //选择的用户id
					userName: null, //选择的用户名
				},
				dataList: [],
				count: null,
				page: 1,
			};
		},
		onReady() {
			getApp().setTitle()
		},
		onLoad() {
			this.getData(1);
		},
		methods: {
			getData(page, change) {
				if (page == 1) {
					this.dataList = [];
					this.count = null;
				}
				var params = {
					size: 10,
					page: page,
				}
				if (this.tabIndex > 0) {
					let status = 0;
					switch (this.tabIndex) {
						case 1:
							{
								status = 0;
								break;
							};
						case 2:
							{
								status = 2;
								break;
							};
						case 3:
							{
								status = 3;
								break;
							};
						case 4:
							{
								status = 4;
								break;
							};
					}
					Object.assign(params, {
						status
					})
				}
				if (this.userInfo.userId) {
					Object.assign(params, {
						zid: this.userInfo.userId
					})
				}
				$https('GET', 'orderReturnList', params, res => {
					if (res.data.errcode == 0) {
						var list = res.data.data.list;
						for (let i in list) {
							var ms1 = Number(list[i].created_at + '000');
							list[i].createdTime = this.timestampToDate(ms1);
							if (list[i].check_time) {
								var ms2 = Number(list[i].check_time + '000');
								list[i].checkTime = this.timestampToDate(ms2);
							}
						}
						if (change) {
							this.dataList = list;
						} else {
							this.dataList = this.dataList.concat(list);
						}
						this.count = res.data.data.count;
						this.page = page;
						this.userList = res.data.data.zi_list ? res.data.data.zi_list : [];
						if (!this.userInfo.userId && this.userList.length > 0) {
							this.userInfo.userName = res.data.data.zi_list[0].nickname;
						}
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				})
			},
			timestampToDate(ms) {
				var now = new Date();
				now.setTime(ms);
				var date = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
				return date;
			},
			change(index) {
				this.tabIndex = index;
				this.dataList = [];
				this.count = null;
				this.page = 1;
				this.getData(1)
			},
			//选择用户
			selectUser(data) {
				this.userInfo.userId = data[0].value == this.userList[0].id ? null : data[0].value;
				this.userInfo.userName = data[0].label;
				this.getData(1, true)
			},
			//按钮事件
			btnAction(option) {
				var type = option.type,
					id = option.id,
					msg = option.msg;
				uni.showModal({
					content: `是否${msg}`,
					confirmColor: '#40AE36',
					success: (res) => {
						if (res.confirm) {
							$https('GET', type, {id: id}, res => {
								if (res.data.errcode == 0) {
									this.getData(1)
								} else {
									uni.showToast({
										title: res.data.errmsg,
										icon: 'none'
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/subpack/user/return_goods/return_goods_detail?id=${id}`
				});
			},
			leftClick() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
		},
		onReachBottom() {
			var page = this.page;
			if (this.dataList.length < this.count) {
				page++;
				this.getData(page)
			}
		},
		watch: {
			// 'userInfo.userId':function(newval,oldval){
			// 	if(oldval && newval!=oldval){
			// 		this.getData(1)
			// 	}
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.order .top_info .top_title {
		justify-content: space-between;
		padding: 24rpx 34rpx 10rpx;
		color: black;
		font-weight: bold;

		.name {
			font-size: 36rpx;
			padding-left: 20rpx;
		}
	}

	.order {
		.top_info {
			width: 100%;
			z-index: 99;
			position: fixed;
			background: #F6F6F7;
// #ifdef APP-PLUS
			top:var(--status-bar-height);
// #endif
			.tabs {
				// padding: 0 36rpx;
			}
		}

		.all_order {
			padding-top: 320rpx;
// #ifdef APP-PLUS
			padding-top:calc(320rpx + var(--status-bar-height));
// #endif
			margin-bottom: 20rpx;
		}

		.success_pay {
			position: absolute;
			font-size: 92rpx;
			color: rgba(255, 0, 0, 0.1);
			transform: rotate(-22deg);
			margin-top: 40rpx;
		}

		.sign_order {
			background: $white;
			margin: 0rpx 34rpx;
			padding: 0 30rpx;
			border-radius: 20rpx;

			image {
				width: 112rpx;
				height: 80rpx;
				margin-right: 22rpx;
			}

			.order_number {
				height: 64rpx;
				line-height: 64rpx;

				border-bottom: 1px solid #ececec;
			}

			.order_info {
				flex-basis: 100%;

				>view {
					margin: 10rpx 0;
				}
			}
		}

		.sign_order:nth-child(n + 2) {
			margin-top: 20rpx;
		}

		//   .scroll_height {
		//     height: calc(100vh - 50px - 318rpx);
		//     /* #ifdef APP-PLUS */
		//     height: calc(100vh - 50px - 245rpx - var(--status-bar-height));
		//     /* #endif */
		//   }

		.select_button {
			padding: 26rpx 0;

			.another_order,
			.confirm_pay {
				border-color: #55a68c;
				color: #55a68c;
			}

			.look_logist,
			.cancel_order {
				color: #8f8f8f;
			}

			.confirm_good {
				color: #e53131;
			}
		}

		.select_button>text {
			border: 1px solid;
			padding: 8rpx 22rpx;
			margin-left: 24rpx;
			font-size: 24rpx;
			border-radius: 24rpx;
		}
	}

	.top_title {
		.icon_user {
			width: 26rpx;
			height: 30rpx;
		}

		.icon_right {
			width: 12rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}

		.account {
			margin-left: 10rpx;
		}
	}

	/deep/.u-tab-item {
  font-size: 28rpx !important;
  color: #333;
}
</style>
